<template>
  <div class="slide-adv-box">
    <div class="img-box">
      <img src="http://static.52letsgo.cn/zz/wechatimg/ic_notice.png" alt="">
    </div>
    <div class="info-box">
      <div id="slide-adv-box-1"><p>{{text1}}</p></div>
      <div id="slide-adv-box-2"><p>{{text2}}</p></div>
    </div>
  </div>
</template>

<script>

  export default{
    data(){
      return {
        timer: {
          type: Object,
          default(){
            return {}
          }
        },
        index: 0,
        text1: "",
        text2: "",
        textIndex: 0
      }
    },
    props: {
      list: {
        type: Array,
        default () {
          return []
        }
      }
    },
    components: {
    },
    methods: {},
    watch: {
      list(curVal, oldVal){
        clearInterval(this.timer);
        var that = this;
        if (that.list.length <= 0) {
          return;
        }
        if (that.list.length == 1) {
          that.text1 = that.list[0];
          clearInterval(that.timer);
          return;
        }
        that.text1 = that.list[0];
        that.text2 = that.list[1];
        that.textIndex = 1;
        this.timer = setInterval(function () {
          that.textIndex++;
          if (that.index == 0) {
            $("#slide-adv-box-1").animate({"left": "-100%"}, 2000, function () {
              $("#slide-adv-box-1").css({"left": "100%"});
              if (that.textIndex >= that.list.length) {
                that.textIndex = 0;
              }
              that.text1 = that.list[that.textIndex];
            });
            $("#slide-adv-box-2").animate({"left": "0"}, 2000);
            that.index = 1;
          } else {
            $("#slide-adv-box-2").animate({"left": "-100%"}, 2000, function () {
              $("#slide-adv-box-2").css({"left": "100%"});
              if (that.textIndex >= that.list.length) {
                that.textIndex = 0;
              }
              that.text2 = that.list[that.textIndex];
            });
            $("#slide-adv-box-1").animate({"left": "0"}, 2000);
            that.index = 0;
          }
        }, 3000);
      }
    },
    ready: function () {
      clearInterval(this.timer);
    },
    beforeDestroy(){
      clearInterval(this.timer);
    }
  }


</script>
<style lang="less">

  .slide-adv-box {
    height: 3rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    background: white;
  }

  .slide-adv-box .img-box {
    width: 2rem;
    height: 100%;
    background: white;
    padding-left: 1rem;
    padding-right: 1rem;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .slide-adv-box .img-box img {
    height: 1.8rem;
    width: 1.8rem;
    z-index: 1;
  }

  .slide-adv-box .info-box {
    flex: 1;
    height: 100%;
    position: relative;
  }

  .slide-adv-box .info-box div {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .slide-adv-box .info-box div p {
    padding: 0 1rem;
    font-size: 1.2rem;
  }

  .slide-adv-box .info-box #slide-adv-box-2 {
    left: 100%;
  }


</style>
